<template>
    <el-dialog v-model="visible" title="模具图元高级设置" width="50%" draggable>

      <el-divider content-position="left">
        <span class="divider_item">横向</span>
      </el-divider>
      <el-row>
      <el-form-item>
        <span class="form-item">尺寸</span>
        <el-radio-group v-model="hornSizeRadio" class="ml-4">
          <el-radio label=0 size="large">随容器</el-radio>
          <el-radio label=1 size="large">不变</el-radio>
          <el-radio label=2 size="large">保持对齐</el-radio>
          <el-radio label=3 size="large">自由调整</el-radio>
        </el-radio-group>
      </el-form-item>
      
      </el-row>
  
      <el-row>
      <el-form-item>
        <span  class="form-item">横向位置</span>
        <el-radio-group v-model="hornPositionRadio" class="ml-4">
          <el-radio label=0 size="large">左侧随容器</el-radio>
          <el-radio label=1 size="large">右侧随容器</el-radio>
          <el-radio label=2 size="large">左侧保持横向布局对齐</el-radio>
          <el-radio label=3 size="large">右侧保持横向布局对齐</el-radio>
        </el-radio-group>
      </el-form-item>
      
    </el-row>

      <el-divider content-position="left">
        <span class="divider_item">纵向</span>
      </el-divider>
      <el-row>
      <el-form-item>
        <span  class="form-item">尺寸</span>
        <el-radio-group v-model="verticalSizeRadio" class="ml-4">
          <el-radio label=0 size="large">随容器</el-radio>
          <el-radio label=1 size="large">不变</el-radio>
          <el-radio label=2 size="large">保持对齐</el-radio>
          <el-radio label=3 size="large">自由调整</el-radio>
        </el-radio-group>
      </el-form-item>
      
    </el-row>
  
<el-row>
      <el-form-item>
        <span  class="form-item">纵向位置</span>
        <el-radio-group  v-model="verticalPositionRadio" class="ml-4">
          <el-radio label=0 size="large">顶部随容器</el-radio>
          <el-radio label=1 size="large">底部随容器</el-radio>
          <el-radio label=2 size="large">顶部保持纵向布局对齐</el-radio>
          <el-radio label=3 size="large">底部保持纵向布局对齐</el-radio>
        </el-radio-group>
      </el-form-item>
      
    </el-row>
  
     
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="onConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </template>
    
  <script  setup>
  import { ref } from 'vue'

  const visible = ref(false)
  const mapctrl = ref(null);
  const hornSizeRadio = ref('0')
  const hornPositionRadio = ref('0')
  const verticalSizeRadio = ref('0')
  const verticalPositionRadio = ref('0')
  
  
  const onConfirm = () => {
    console.log("symbolUnitDefDlg show--------------:");
    visible.value = false;
    let hornSize = hornSizeRadio.value;
    let hornPos = hornPositionRadio.value;
    let verticalSize = verticalSizeRadio.value;
    let verticalPos = verticalPositionRadio.value;
    let unitCtlInfo = {hornSize,hornPos,verticalSize,verticalPos};
    window.mainctl.m_pEditINTF.modifySymbolUnitCtrlInfo(unitCtlInfo);
  }

  defineExpose({
    visible,
    mapctrl
  });
  
  </script>
  
  <style scoped>
  .inline-label {
    display: inline-block;
    margin-right: 10px; /* 可选，用于设置标签和按钮之间的间距 */
  }
  
  .inline-button {
    display: inline-block;
  }
  
  .symbolLabel {
    display: inline-block;
    margin-right: 10px; /* 可选，用于设置标签和输入框之间的间距 */
  }
  
  .symbolInput {
    display: inline-block;
  }
  
  .el-dialog__title {
    padding: 0px; /* 设置标题的上下内边距 */
    margin-bottom: 10px; /* 设置标题与内容之间的外边距 */
  }
  
  .el-dialog .el-dialog__header {
    padding: 10px; /* 设置标题区域的上下内边距 */
  }
  
  /* 通过选择器 .el-dialog__body 来修改内容部分的样式 */
  .el-dialog__body {
    padding: 10px; /* 设置内容部分的上下内边距 */
  }
  
  /* 调整el-drawer的位置 */
  .el-dialog__wrapper {
    position: relative;
  }
  
  .form-item{
    color:green;
    font-size: 16px;
    display: inline-block;
    text-align: justify;
    text-align-last: justify;
    width: 90px;
    margin-right: 10px;
  }

  .divider_item{
    color: blue;
    font-size: 18px;
  }
  </style>
    